<template>
  <div class="main-bg">
    <div class="main-tabs">
      <div class="tabs" @click="toPage()">点赞</div>
      <div class="tabs" @click="toPage()">反对</div>
      <div class="tabs" @click="toPage()">评论</div>
      <div class="tabs" @click="toPage()">收藏</div>
    </div>
    <QuestionCard class="card1"></QuestionCard>
    <el-button class="button1" type="primary" @click="getQuestionQuery" round>问题组件的按钮</el-button>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import QuestionCard from "@/components/QuestionCard.vue";
export default defineComponent({
  name: "MainBox",
  components: {QuestionCard},
  data(){
    return {
      questionQuery: this.$store.state.questionQuery,
    }
  },
  watch:{
    questionQuery:{
      deep: true,
      async handler(newVal,oldVal) {
        console.log("问题组件中new" + newVal);
        console.log("问题组件中new" + oldVal);
      }
    },
  },
  methods:{
    getQuestionQuery() {
      console.log("问题组件中获取值" + this.questionQuery);
    },

  },

})
</script>

<style scoped>
.card1{
  float: left;
}
.button1{
  float: left;
  margin-top: 17vh;
  margin-left: 5vw;
}
.main-bg{
  background-color: #ffffff;
  width: 70%;
  box-shadow: 0 1px 3px hsla(0,0%,7%,.1);
  height: 100vh;
  margin: 20px auto 0 auto;
}
.main-tabs{
  display: flex;
  border-bottom: #ececec 2px solid;
}
.tabs{
  margin: 20px 30px;
}
.tabs:hover{
  color: #54b4f8;
  cursor: pointer;
}
</style>
